<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-card shadow="hover">
        <el-button type="primary" :icon="User" circle />
        <span style="float: right;">
          <label for="">已注册</label>
          {{ student_item }}
        </span>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover">
        <el-button type="success" :icon="Position" circle />
        <span style="float: right;">
          <label for="">常驻教练</label>
          {{ coach_item }}
        </span>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover">
        <el-button type="info" :icon="Unlock" circle />
        <span style="float: right;">
          <label for="">空闲车辆</label>
          {{ car_item }}
        </span>
      </el-card>
    </el-col>
    <el-col :span="6">
      <el-card shadow="hover">
        <el-button type="danger" :icon="Trophy" circle />
        <span style="float: right;">
          <label for="">已毕业</label>
          {{ graduate_item }}
        </span>
      </el-card>
    </el-col>
  </el-row>

  <el-row>
    <el-col :span="12">
      <e-charts :option="option" style="width: 400px; height: 500px;">
      </e-charts>
    </el-col>
    <el-col :span="12">
      <e-charts :option="option1" style="width: 600px; height: 600px;">
      </e-charts>
    </el-col>
  </el-row>
</template>
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';
const student_item = ref()
const coach_item = ref()
const graduate_item = ref()
const car_item = ref()
import {
  User,
  Trophy,
  Position,
  Unlock,
} from '@element-plus/icons-vue'
const option = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      padAngle: 5,
      itemStyle: {
        borderRadius: 10
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: student_item, name: '已注册' },
        { value: coach_item, name: '常驻教练' },
        { value: car_item, name: '空闲车辆' },
        { value: graduate_item, name: '已毕业' },
      ]
    }
  ]
});
const option1 = {
  graphic: {
    elements: [
      {
        type: 'text',
        left: 'center',
        top: 'center',
        style: {
          text: '赶快报名吧！',
          fontSize: 80,
          fontWeight: 'bold',
          lineDash: [0, 200],
          lineDashOffset: 0,
          fill: 'transparent',
          stroke: '#000',
          lineWidth: 1
        },
        keyframeAnimation: {
          duration: 3000,
          loop: true,
          keyframes: [
            {
              percent: 0.7,
              style: {
                fill: 'transparent',
                lineDashOffset: 200,
                lineDash: [200, 0]
              }
            },
            {
              // Stop for a while.
              percent: 0.8,
              style: {
                fill: 'transparent'
              }
            },
            {
              percent: 1,
              style: {
                fill: 'black'
              }
            }
          ]
        }
      }
    ]
  }
};
function getdata(){
  axios.get("http://127.0.0.1:8000/home")
  .then(res => {
    console.log(res)
    student_item.value = res.data.student_item
    coach_item.value = res.data.coach_item
    car_item.value = res.data.car_item
    graduate_item.value = res.data.graduate_item
  })
  .catch(err => {
    console.error(err); 
  })
}
onMounted(() => {
  getdata()
  // Your code here
});
// 在组件卸载前执行的操作
onUnmounted(() => {
  // Your code here
});
</script>
<style>
.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
